<template>
  <div class="experience">
    <div class="ex" v-for="(item,index) in exList" :key="index">
      <div class="ex-time">
        <p>{{item.timeStr}}</p>
        <p>{{item.address}}</p>
        <el-button @click="deleteHandle(item.experienceId,index)" size="mini">删除</el-button>
      </div>
      <div class="ex-content">
        {{item.experienceExplain}}
      </div>
    </div>
    <div v-if="isAdd" class="add">
      <div class="ex-time"  :key="'ex2'">
        <el-date-picker
            size="mini"
            v-model="experience.timeStr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-input
            style="width: 30%;margin-left: 10px"
            placeholder="请输入公司名字"
            size="mini"
            prefix-icon="el-icon-office-building"
            v-model="experience.address">
        </el-input>
      </div>
      <div class="ex-content" :key="'ex3'">
        <el-input
            maxlength="240"
            style="width: 100%"
            type="textarea"
            show-word-limit
            :rows="4"
            placeholder="请描述在公司岗位或者项目经历以及个人感受(>=30字)"
            v-model="experience.experienceExplain">
        </el-input>
<!--       <textarea v-model="content" placeholder="填写经历" style="width: 100%;height: 100px"></textarea>-->
      </div>
    </div>
    <div v-if="isAdd" class="cancel">
      <el-button size="mini" @click="saveHandle()" >保存</el-button>
      <el-button size="mini" @click="isAdd=false">取消</el-button>
    </div>
    <div v-else class="add-ex">
      <i @click="isAdd=true" class="el-icon-circle-plus-outline"></i>
    </div>
  </div>
</template>

<script>
import {addExperience, delExperience, putResume} from "@/api/resume";

export default {
  name: "experience",
  props:["exList","resumeId"],
  data(){
    return{
      content: '',
      time:'',
      company:'',
      isAdd:false,
      experience:{
        address:'',
        experienceExplain:'',
        timeStr:'',
        resumeId:this.resumeId
      }
    }
  },
  watch:{
    // exList:function (){
    //   putResume({experienceList:this.exList}).then(res=>{
    //     console.log(res)
    //   })
    // }
  },
  methods:{
    saveHandle(){
      if (this.experience.experienceExplain.length<=30){
        this.$message.warning('字数需要大于30字~')
        return
      }
      const add=async ()=>{
        let time=this.experience.timeStr
        this.experience.timeStr=this.timeTransform(time[0],time[1])
        const res=await addExperience(this.experience)
        this.exList.push(res.data.extend.experience)
        this.$message.success("保存成功!")
        this.experience.address=''
        this.experience.experienceExplain=''
        this.experience.timeStr=''
      }
      add()
    },
    deleteHandle(id,index){
      delExperience(id).then(res=>{
        this.exList.splice(index,1)
        this.$message.success("删除成功!")
      })

    },
    timeTransform(min,max){
      let str1=`${min.getFullYear()}.${min.getMonth()+1}`
      let str2=`${max.getFullYear()}.${max.getMonth()+1}`
      return `${str1}-${str2}`
    }
  }
}
</script>

<style lang="stylus" scoped>
.experience
  width 100%
  display flex
  flex-direction column
  &>.ex
    width 100%
    display flex
    flex-direction column
    border-bottom 1px dotted #ece4e4
.ex-time
  width 100%
  display flex
  justify-content space-between
  align-items center
  height 40px
.ex-content
  width 100%
.add-ex
  height 40px
  display flex
  justify-content center
  align-items center
  & i
    cursor: pointer;
    font-size 30px
    background #07c160
    border-radius 50%
    color #f7faf9
.cancel
  height 40px
  display flex
  justify-content flex-end
  align-items center
</style>
